<template>
  <div class="app-container">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item label="调入仓">
          <el-select placeholder="请先选择调入仓" v-model="saveForm.house_id" filterable>
            <el-option v-for="item in houseList" :key="item.house_id" :label="item.name" :value="item.house_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="外部渠道来源">
          <el-select filterable placeholder="选择来源" v-model="saveForm.from">
            <el-option label="总部配送" value="1"></el-option>
            <el-option label="商家赠送" value="2"></el-option>
            <el-option label="店内捡到" value="3"></el-option>
            <el-option label="其他" value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="pull-right">
          <el-button type="primary" @click="showGiftDialog">添加礼品</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border fit size="small">
        <el-table-column align="center" label="礼品图片" width="80">
          <template slot-scope="scope">
            <img :src="scope.row.thumb" width="60" height="60" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label="新礼品编号" prop="id"></el-table-column>
        <el-table-column align="center" label="神采礼品编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label='礼品名称' prop="gift_name"></el-table-column>
        <el-table-column align="center" label="箱规" prop="box_num"></el-table-column>
        <el-table-column align="center" label='尺寸' prop="size"></el-table-column>
        <el-table-column align="center" label="礼品详情">
          <template slot-scope="scope">
            <el-button type="text" @click="info(scope.$index)" size="mini">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label='入库数'>
          <template slot-scope="scope">
            <el-input type="number" onmousewheel="return false;" v-model="scope.row.num" placeholder="数量"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label='礼品成本价（元）'>
          <template slot-scope="scope">
            <!-- 保留小数 -->
            {{scope.row.money_cost/1000000|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label='礼品成本总价（元）'>
          <template slot-scope="scope">
            {{scope.row.num*scope.row.money_cost/1000000|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="80">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delClick(scope.$index)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :close-on-click-modal="false" title="礼品详情" :visible.sync="infoDialog" width="600px">
      <el-table highlight-current-row :data="giftInfo" border>
 
        <el-table-column align="center" prop="type_name" label="三级分类"></el-table-column>
        <el-table-column align="center" prop="serie_name" label="系列"></el-table-column>
        <el-table-column align="center" prop="texture" label="材质"></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 搜索礼品弹框 -->
    <el-dialog :close-on-click-modal="false" width="60%" class="dialog_table" style="margin-top: -60px;" title="选择礼品" :visible.sync="addGiftDialog"
      append-to-body>
      <el-form :inline="true" :model="searchGiftForm" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select v-model="searchGiftForm.conditions" style="width:140px;">
            <el-option label="搜礼品名称" value="3"></el-option>
            <el-option label="搜新礼品编号" value="1"></el-option>
            <el-option label="搜神采礼品编号" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchGiftForm.gift_id" placeholder="请输入礼品编号/名称" @keyup.enter.native="searchGiftClick"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchGiftClick">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table highlight-current-row :data="giftList" v-loading.body="listLoading" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="36"></el-table-column>
        <el-table-column align="center" label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.thumb" width="40" height="40" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label="名称" prop="gift_name"></el-table-column>
        <el-table-column align="center" label="新礼品编号" prop="id"></el-table-column>
        <el-table-column align="center" label="神采礼品编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label="箱规" prop="box_num"></el-table-column>
        <el-table-column align="center" label="尺寸" prop="size"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button :disabled="checkGiftList.length==0" type="primary" @click="saveAddClick()" size="small">确认添加</el-button>
      </div>

    </el-dialog>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-input class="pull-left w200" size="small" v-model="saveForm.remark" placeholder="备注信息"></el-input>
      <el-button :disabled="list.length==0" class="pull-right" type="primary" size="small" @click="saveClick">确认入库</el-button>
    </div>
  </div>
</template>

<script>
import { getGiftList, house, save } from '@/api/storage_control/sundry';
export default {
  data() {
    return {
      machineInfo: '',
      list: [],
      listLoading: false,
      addGiftDialog: false,
      houseList: null,
      giftList: [], //搜索出来的礼品列表
      checkGiftList: [], //选中的礼品列表
      searchGiftForm: {
        //搜索条件
        conditions: '3',
        gift_id: ''
      },
      saveForm: {
        from: '1',
        house_id: '',
        remark: '',
        gift: []
      },
      giftInfo: [],
      infoDialog: false
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (!vm.houseList) {
        vm.getHouse();
      }
    });
  },
  methods: {
    // ---------搜索礼品弹框--------
    // 添加礼品
    saveAddClick() {
      let ok = true;
      for (let i = 0; i < this.checkGiftList.length; i++) {
        for (let j = 0; j < this.list.length; j++) {
          if (this.checkGiftList[i].id == this.list[j].id) {
            this.$message({ type: 'error', message: '有礼品已存在列表' });
            ok = false;
            break;
          }
        }
      }
      if (ok) {
        this.$message({ type: 'success', message: '添加成功' });
        for (let i = 0; i < this.checkGiftList.length; i++) {
          this.list.push(this.checkGiftList[i]);
        }
        this.addGiftDialog = false;
      }
    },
    // 搜索礼品
    searchGiftClick() {
      getGiftList(this.searchGiftForm).then(response => {
        this.giftList = response;
      });
    },
    // 多选礼品
    handleSelectionChange(val) {
      this.checkGiftList = val;
      console.log(this.checkGiftList);
    },
    // 添加礼品弹框
    showGiftDialog() {
      this.addGiftDialog = true;
    },
    // -----------------

    info(index) {
      this.giftInfo = [];
      this.infoDialog = true;
      this.giftInfo[0] = this.list[index];
    },
    saveClick() {
      this.saveForm.gift = [];
      let ok = true;
      if (!this.saveForm.house_id) {
        this.$message({ type: 'error', message: '请选择调入仓' });
        return;
      }
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].num * 1 < 1 || this.list[i].num == '' || !/^\d+$/.test(this.list[i].num)) {
          ok = false;
          this.$message({ type: 'error', message: '请把入库数量填写完整,入库数量只能为整数' });
          break;
        }
      }
      if (ok) {
        for (let i = 0; i < this.list.length; i++) {
          this.saveForm.gift.push({
            gift_id: this.list[i].id,
            num: this.list[i].num,
            look_money: this.list[i].money_cost
          });
        }
        save(this.saveForm).then(response => {
          this.$message({
            type: response.code == 1 ? 'success' : 'error',
            message: response.message
          });
          if (response.code == 1) {
            this.list = [];
          }
        });
      }
    },
    delClick(index) {
      this.list.splice(index, 1);
    },
    getHouse() {
      house({ category_id: 98 }).then(response => {
        this.houseList = response;
        console.log(response);
      });
    }
  }
};
</script>